<template>
  <!-- 进度看板 -->
  <div class="wh100 flex_column">
    <div class="toppage flex_align">
      <div class="kailea">
        <corner-card>
          <div slot="head" class="flex_1 flex_between">
            <div class="title">开累进度</div>
            <div class="flex_align">
              <div class="box flex_between">
                <div>概算批复</div>
                <div class="num">{{approval}}亿</div>
              </div>
              <div class="box flex_between">
                <div>完成投资</div>
                <div class="num">{{investment}}亿</div>
              </div>
            </div>
          </div>
          <div slot="content" class="h100">
            <div class="wh100" id="kaileaBar"></div>
          </div>
        </corner-card>
      </div>
      <!--  -->
      <div class="project_month flex_1">
        <corner-card>
          <div class="flex_1 flex_between" slot="head">
            <div class="title">年月进度(万元)
            </div>
            <el-date-picker v-model="month" type="month" @change="initTopBar()" format="yyyy年M月" :clearable="false" />
          </div>
          <div class="construct_body" slot="content">
            <div class="item flex_align" v-for="(item, index) in topRightData" :key="index" @click="onChangeYm(item.id)">
              <div class="w100">
                <div class="flex_align">
                  <div class="flex_1 detail">
                    <div class="detail-title">{{item.type}}计划</div>
                    <div class="detail-number colorBlue">{{item.planNumer}}</div>
                  </div>
                  <div class="flex_1 detail">
                    <div class="detail-title">{{item.type}}完成</div>
                    <div class="detail-number colorGreen">{{item.completeNumber}}</div>
                  </div>
                </div>
                <!--  -->
                <div class="item-middle">
                  <div class="percent-title">总体进度</div>
                  <el-progress :stroke-width="10" :percentage="getPercent(item)" text-color="black"></el-progress>
                </div>
                <div class="item-bottom">
                  <div class="project-info flex_between" v-for="(jtem, jndex) in item.rank" :key="jndex">
                    <div class="flex_align">
                      <img :src="jtem.src">
                      <!-- <div class="name">{{jtem.name}}</div> -->
                      <div class="name">{{projectsArr[jndex].name}}</div>
                    </div>
                    <div class="flex_align">
                      <el-progress type="circle" :width="12" :stroke-width="2" :percentage="jtem.percent" :show-text="false"></el-progress>
                      <div class="percent">{{jtem.percent}}%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </corner-card>
      </div>
    </div>
    <!--  -->
    <div class="bottompage flex_1">
      <corner-card>
        <div class="flex_1 flex_between" slot="head">
          <div class="title">投资进度</div>
          <div class="year flex_align">
            <div class="y_item" :class="{'active':currYear==item.value}" v-for="(item,index) in tabYear" :key="'tabYear'+index" @click="onSelYear(item.value)">{{item.title}}</div>
          </div>
        </div>
        <div class="h100" slot="content" @click="onChangeYm(currYear)">
          <div class="wh100" id="bottomBar"></div>
        </div>
      </corner-card>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import CornerCard from './cornerCard.vue';
export default {
  components: {
    CornerCard
  },
  data() {
    return {
      projectsArr: [],
      approval: '364.2',
      investment: '168.9',
      //
      month: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
      topRightData: [
        {
          id: 1,
          type: '本年',
          planNumer: '10000',
          completeNumber: '5060',
          totalPercent: 0,
          rank: [
            {
              name: '项目简称',
              percent: 78,
              src: require(`@/assets/images/no1.png`)
            },
            {
              name: '项目简称',
              percent: 65,
              src: require(`@/assets/images/no2.png`)
            },
            {
              name: '项目简称',
              percent: 56,
              src: require(`@/assets/images/no3.png`)
            }
          ]
        },
        {
          id: 2,
          type: '半年',
          planNumer: '60',
          completeNumber: '30',
          totalPercent: 0,
          rank: [
            {
              name: '项目简称',
              percent: 78,
              src: require(`@/assets/images/no1.png`)
            },
            {
              name: '项目简称',
              percent: 69,
              src: require(`@/assets/images/no2.png`)
            },
            {
              name: '项目简称',
              percent: 39,
              src: require(`@/assets/images/no3.png`)
            }
          ]
        },
        {
          id: 3,
          type: '本月',
          planNumer: '50',
          completeNumber: '20',
          totalPercent: 0,
          rank: [
            {
              name: '项目简称',
              percent: 81,
              src: require(`@/assets/images/no1.png`)
            },
            {
              name: '项目简称',
              percent: 54,
              src: require(`@/assets/images/no2.png`)
            },
            {
              name: '项目简称',
              percent: 46,
              src: require(`@/assets/images/no3.png`)
            }
          ]
        }
      ],
      //
      currYear: 1,//当前选择年
      tabYear: [
        { title: '年度', value: 1 },
        { title: '半年度', value: 2 },
        { title: '月度', value: 3 }
      ]
    }
  },
  created() {
    this.projectsArr = JSON.parse(sessionStorage.getItem('projectsArr'))
    if (this.projectsArr) { this.projectsArr.splice(0, 1) }
  },
  mounted() {
    this.initKaileaBar()//开累进度
    this.initTable()//年月进度
    this.initBottomBar()//投资进度
  },
  methods: {
    onChangeYm(id) {
      let url = ''
      let query = {}
      if (id == 1 || id == 2) {
        url = '/investmentmanagement/annual-plan'
      } else if (id == 3) {
        url = '/investmentmanagement/monthlyreport'
        query = { id: 8 }
      }
      const rData = this.$router.resolve({ path: url, query: query })
      window.open(rData.href, '_blank')
    },
    initKaileaBar() {
      let info = {
        list: [
          { name: '项目1', data1: 100, data2: 30 },
          { name: '项目2', data1: 40, data2: 50 },
          { name: '项目3', data1: 60, data2: 70 },
          { name: '项目4', data1: 20, data2: 30 },
          { name: '项目5', data1: 50, data2: 50 },
          { name: '项目6', data1: 30, data2: 40 },
          { name: '项目7', data1: 30, data2: 80 },
          { name: '项目4', data1: 20, data2: 30 },
          { name: '项目3', data1: 60, data2: 70 },
          { name: '项目2', data1: 40, data2: 50 },
          { name: '项目7', data1: 30, data2: 80 },
          { name: '项目5', data1: 50, data2: 50 },
        ]
      }

      this.KaileaBar && this.KaileaBar.clear()
      this.KaileaBar && this.KaileaBar.dispose()
      let chartDom = document.getElementById('kaileaBar')
      let myChart = echarts.init(chartDom)
      let option = {
        grid: {
          bottom: 10,
          top: 30,
          left: '10%',
          right: '5%',
          containLabel: true
        },
        tooltip: {
          show: "true",
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: '#1C1E24',
          borderColor: '#1C1E24',
          textStyle: {
            color: '#ffffff'
          },
          formatter: function(params) {
            // console.log("params=", params[0].data)
            return `<div style="font-size: 14px;line-height: 1.4;"><div>概算批复：32345万元</div><div>完成投资：16820万元</div><div>百分比：51%</div></div>`
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#F0F0F0',
            }
          },
          splitNumber: 5,
          name: '万元',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'right'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#707070',
              }
            },
            axisLabel: {
              color: '#7C7C7C',
              rotate: 30,
              interval: 0
            },
            data: this.projectsArr.map(e => e.name)
            // data:info.list.map(item => item.name)
          }
        ],
        series: [
          {
            name: '完成投资',
            type: 'bar',
            itemStyle: {
              show: true,
              color: '#DAF3D1',
              borderRadius: [15, 15, 0, 0]
            },
            barWidth: 15,
            data: info.list.map(item => item.data2)
          },
          {
            name: '概算批复',
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
              show: true,
              color: '#5EC738',
              borderRadius: [15, 15, 0, 0]
            },
            barWidth: 15,
            data: info.list.map(item => item.data1)
          },
        ]
      }
      setTimeout(() => {
        option && myChart.setOption(option)
        this.bottomBarInstance = myChart
      }, 200);

    },
    initTable() {
    },
    getPercent(item) {
      if (Number(item.planNumer) === 0 && item.completeNumber > 0) {
        return 100
      }
      return isNaN(Number((item.completeNumber / item.planNumer * 100).toFixed(2))) ? 0 : Number((item.completeNumber / item.planNumer * 100).toFixed(2))
    },
    onSelYear(val) {
      this.currYear = val
    },
    initBottomBar() {
      this.BottomBar && this.BottomBar.clear()
      this.BottomBar && this.BottomBar.dispose()
      let chartDom = document.getElementById('bottomBar')
      let myChart = echarts.init(chartDom)
      let option = {
        grid: {
          top: '30px',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          show: "true",
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          valueFormatter: (val) => {
            return `${val}万元`
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#F0F0F0',
            }
          },
          splitNumber: 5,
          name: '万元',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'right'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#707070',
              }
            },
            axisLabel: {
              color: '#7C7C7C'
            },
            data: this.projectsArr.map(e => e.name)
          }
        ],
        series: [
          {
            name: '计划完成产值',
            type: 'bar',
            itemStyle: {
              show: true,
              color: '#E4ECFC',
              borderRadius: [15, 15, 0, 0]
            },
            barGap: '20%',
            barGap: '-100%',
            barWidth: 20,
            data: [30, 40, 40, 60, 70, 80, 70, 80, 90, 100, 30, 20, 10]
          },
          {
            name: '实际完成产值',
            type: 'bar',
            itemStyle: {
              show: true,
              color: '#3982FA',
              borderRadius: [15, 15, 0, 0]
            },
            barWidth: 20,
            data: [20, 30, 40, 50, 10, 40, 60, 70, 60, 50, 20, 10, 50]
          }
        ]
      }
      setTimeout(() => {
        option && myChart.setOption(option)
        this.BottomBar = myChart
      }, 200);
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/homepage.scss";
.title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1c1e24;
  height: 100%;
  padding-right: 24px;
}
.toppage {
  height: 394px;
  margin-bottom: 22px;
}
.bottompage {
  .year {
    background-color: #f2f6ff;
    border-radius: 8px;
    .y_item {
      min-width: 82px;
      color: #005fff;
      font-size: 14px;
      white-space: nowrap;
      border-radius: 8px;
      cursor: pointer;
      padding: 8px 27px;
      box-sizing: border-box;
      &.active {
        background-color: #1e70fa;
        color: white;
      }
    }
  }
}

.kailea {
  width: 582px;
  height: 100%;
  margin-right: 23px;
  .box {
    width: 158px;
    font-size: 14px;
    border-radius: 5px;
    padding: 7px 13px;
    margin-right: 11px;
    &:first-child {
      background-color: rgba(223, 42, 42, 0.05);
      border: 1px solid #df2a2a;
      .num {
        color: #df2a2a;
      }
    }
    &:last-child {
      background-color: rgba(73, 178, 35, 0.05);
      border: 1px solid #49b223;
      margin-right: 0;
      .num {
        color: #429f21;
      }
    }
  }
}

.project_month {
  height: 100%;
  ::v-deep {
    .el-date-editor.el-input {
      width: 160px;
      cursor: pointer;
    }
    .el-input__inner {
      text-align: right;
      height: 30px;
      line-height: 30px;
      padding-right: 10px;
    }
    .el-input__icon {
      line-height: 30px;
    }
  }
  .construct_body {
    display: flex;
    justify-content: space-around;
    height: 100%;
    position: relative;
    padding: 0 20px 20px 24px;
    box-sizing: border-box;
    .item {
      cursor: pointer;
      width: 32%;
      background-color: #f8f8f8;
      border-radius: 15px;
      padding: 12px;
      box-sizing: border-box;
      .detail {
        width: 50%;
      }
      .detail-title {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #333333;
        margin-bottom: 5px;
      }
      .detail-number {
        min-height: 32px;
        font-size: 32px;
        font-family: DIN-Bold, DIN;
        font-weight: bold;
      }
      .colorBlue {
        color: #105cdd;
      }
      .colorGreen {
        color: #429f21;
      }
      .item-middle {
        margin-top: 13px;
        margin-bottom: 24px;
        .percent-title {
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          color: #333333;
        }
        ::v-deep {
          .el-progress-bar {
            padding-right: 50px;
            margin-right: -50px;
          }
          .el-progress-bar__inner {
            background-color: unset;
            background-image: linear-gradient(
              270deg,
              #2c79fa 0%,
              rgba(44, 121, 250, 0.18) 100%
            );
            border-radius: 0px 8px 8px 0px;
            opacity: 0.93;
          }
          .el-progress__text {
            width: 50px;
            font-size: 14px !important;
            margin-left: 0px;
            text-align: right;
          }
        }
      }
      .item-bottom {
        .project-info {
          margin-bottom: 10px;
          // &:last-child {
          //   margin-bottom: 0;
          // }
          img {
            width: 26px;
            height: 14px;
            display: block;
          }
          .name {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            color: #333333;
            margin-left: 10px;
            margin-right: 10px;
          }
          .percent {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            color: #000000;
            line-height: 1;
            margin-left: 10px;
            margin-top: 3px;
          }
        }
      }
    }
  }
}
</style>
